<template>
  <div class="app-pager">
    <div class="app-pager__header" v-if="!!title">
      <span class="app-pager__title">{{ title }}</span>
    </div>

    <slot/>

  </div>
</template>

<script lang="ts">
export default {
  name: "Pager",
  props: {
    title: ""
  },
  setup() {
    return {}
  }
}
</script>

<style lang="scss">
.app-pager {
  height: 100%;
  width: 100%;
  padding: 3px;
  position: relative;
  box-sizing: border-box;

  &__header{
    border-left: 3px solid cornflowerblue;
    padding: 4px;
    margin: 6px 0;
  }

  &__header, &__title {
    font-size: 18px;
    font-weight: bold;
  }

}

</style>